<template>
    <div class="test">
        <NodeContainer :title="data.typeName" :icon="data.icon" :has-more-options="false" v-bind="$attrs">
            <div class="node-content" ref="contentRef">
                <ul ref="listRef">
                    <li v-for="(item, index) in list" :key="index">测试一</li>
                </ul>
            </div>
        </NodeContainer>

        <Handle id="target-a" type="target" :position="Position.Left" :style="{ top: '25%' }">
            <div class="handle-content">
                <p>Test-a</p>
            </div>
        </Handle>
        <Handle id="target-b" type="target" :position="Position.Left" :style="{ top: '75%' }">
            <div class="handle-content">    
                <p>Test-b</p>
            </div>
        </Handle>
        <Handle v-for="(item, index) in list" :key="index" :id="item.id" type="source" :position="Position.Right"
            :style="{ top: `${50 + index * 30}px` }">
            <div class="handle-content">
                <p>{{item.name}}-{{item.id}}</p>
            </div>
        </Handle>
    </div>
</template>

<script setup lang="ts" name="BranchNode">
import { ref, onMounted, watch, nextTick } from 'vue'
import { Handle, Position, AddNodes, useVueFlow } from '@vue-flow/core'
import NodeContainer from './node_container.vue'

const props = defineProps({
    id: {
        type: String,
        required: true,
    },
    data: {
        type: Object,
        required: true,
    },
    selected: {
        type: Boolean,
        default: false,
    },
    dragging: {
        type: Boolean,
        default: false,
    },
})

const list = ref([
    {
    id: "a",
    name: "测试A",
    },
    {
        id: "b",
        name: "测试B",
    },
    {
        id: "c",
        name: "测试C",
    },
    {
        id: "d",
        name: "测试D",
    },
    {
        id: "e",
        name: "测试E",
    },
])

</script>

<style scoped>
@import "@/assets/handle.css";

.node-content {
    padding: 10px;
    flex-grow: 1;
    height: auto;
    background-color: #f5f7fa;
}

.vue-flow__handle.source {
    top: 50px;
}

.handle-content {
  position: absolute;
  white-space: nowrap; /* 防止换行 */
  font-size: 12px; /* 文本大小 */
  font-weight: bolder;
  color: #555; /* 文本颜色 */
  pointer-events: none; /* 禁用事件 */
  
  /* 统一左侧定位规则 */
  right: calc(100% + 5px); /* 位于handle左侧5px处 */
  top: 50%; /* 垂直居中 */
  transform: translateY(-50%); /* 精确居中 */
}
</style>